<template>
  <div class="generator-body-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-page-header @back="goBack" content="发电机本体原理教学">
        <template #title>
          <span class="header-title">整流发电机虚拟训练软件</span>
        </template>
        <template #extra>
          <div class="header-actions">
            <el-button type="primary" :icon="Printer" @click="handlePrint">打印</el-button>
            <el-button :icon="Download" @click="handleDownload">下载PDF</el-button>
            <el-button :icon="Star" @click="handleFavorite">收藏</el-button>
          </div>
        </template>
      </el-page-header>
    </div>

    <!-- 内容区域 -->
    <div class="markdown-content">
      <!-- 标题区域 -->
      <h1 class="content-title">发电机本体原理与结构</h1>

      <!-- 概述部分 -->
      <section class="content-section">
        <h2>1. 发电机本体概述</h2>
        <p>发电机本体是发电机的核心部件，主要由定子和转子两部分组成。定子部分包括定子铁芯、定子绕组和机座；转子部分包括转子铁芯、转子绕组、转轴和风扇等。</p>

        <p>发电机本体通过电磁感应原理将机械能转换为电能，是发电机组中最重要的能量转换装置。其性能直接影响到整个发电机组的发电效率和稳定性。</p>

        <!-- 发电机本体基本原理教学示意图 -->
        <div class="image-container">
          [](@replace=1)

          <p class="image-caption">图6-4 发电机本体基本原理教学示意</p>
        </div>
      </section>

      <!-- 结构组成 -->
      <section class="content-section">
        <h2>2. 结构组成</h2>

        <h3>2.1 定子部分</h3>
        <ul>
          <li><strong>定子铁芯</strong>：由硅钢片叠压而成，用于导磁和支撑定子绕组</li>
          <li><strong>定子绕组</strong>：嵌入定子铁芯槽中，是产生感应电动势的部分</li>
          <li><strong>机座</strong>：支撑定子铁芯和绕组，并提供冷却风道</li>
        </ul>

        <h3>2.2 转子部分</h3>
        <ul>
          <li><strong>转子铁芯</strong>：同样由硅钢片叠压而成，安装在转轴上</li>
          <li><strong>转子绕组</strong>：通入直流电后产生磁场</li>
          <li><strong>转轴</strong>：传递机械转矩，支撑转子旋转</li>
          <li><strong>风扇</strong>：提供冷却气流，确保发电机正常运行温度</li>
        </ul>

        <!-- 三维爆炸图 -->
        <div class="image-container">
          [](@replace=2)

          <p class="image-caption">图6-8 加定转子的三维爆炸图</p>
        </div>
      </section>

      <!-- 工作原理 -->
      <section class="content-section">
        <h2>3. 工作原理</h2>
        <p>发电机本体基于法拉第电磁感应定律工作：当导体在磁场中运动切割磁力线时，导体中会产生感应电动势。</p>

        <p>具体过程如下：</p>
        <ol>
          <li>原动机（如柴油机）带动转子旋转</li>
          <li>转子绕组通入直流电产生旋转磁场</li>
          <li>旋转磁场切割定子绕组中的导体</li>
          <li>定子绕组中产生感应电动势</li>
          <li>当外部电路闭合时，产生电流输出电能</li>
        </ol>

        <p>发电机的输出电压和频率可以通过调节转子励磁电流和转子转速来控制。</p>

        <!-- 电路原理图占位 -->
        <div class="image-placeholder">
          <p class="placeholder-text">[图：发电机电路原理图]</p>
          <div class="placeholder-box">
            <span>发电机电路原理示意图</span>
            <p>展示发电机内部电路连接和工作原理</p>
          </div>
        </div>
      </section>

      <!-- 技术参数 -->
      <section class="content-section">
        <h2>4. 主要技术参数</h2>

        <el-table :data="technicalParams" stripe style="width: 100%">
          <el-table-column prop="parameter" label="参数名称" width="180"></el-table-column>
          <el-table-column prop="value" label="参数值" width="120"></el-table-column>
          <el-table-column prop="unit" label="单位" width="80"></el-table-column>
          <el-table-column prop="description" label="说明"></el-table-column>
        </el-table>
      </section>

      <!-- 冷却系统 -->
      <section class="content-section">
        <h2>5. 冷却系统</h2>
        <p>发电机在运行过程中会产生大量热量，需要通过冷却系统散热以确保正常运行。常见的冷却方式包括：</p>

        <h3>5.1 空气冷却</h3>
        <p>通过风扇强制空气循环，带走发电机产生的热量。结构简单，维护方便，适用于中小型发电机。</p>

        <h3>5.2 氢气冷却</h3>
        <p>氢气导热性能好，密度小，摩擦损耗小，适用于大型发电机。但需要复杂的密封系统和安全措施。</p>

        <h3>5.3 水冷却</h3>
        <p>通过水循环直接冷却绕组，冷却效果好，但系统复杂，需要防漏电和防腐蚀措施。</p>

        <!-- 冷却系统示意图占位 -->
        <div class="image-placeholder">
          <p class="placeholder-text">[图：发电机冷却系统示意图]</p>
          <div class="placeholder-box">
            <span>冷却系统工作原理图</span>
            <p>展示发电机冷却系统结构和气流/水流路径</p>
          </div>
        </div>
      </section>

      <!-- 维护要点 -->
      <section class="content-section">
        <h2>6. 维护与检查要点</h2>

        <h3>6.1 日常检查</h3>
        <ul>
          <li>检查发电机外观有无异常</li>
          <li>监听运行声音是否正常</li>
          <li>检查振动是否在允许范围内</li>
          <li>监测轴承温度、定子温度等参数</li>
        </ul>

        <h3>6.2 定期维护</h3>
        <ul>
          <li>清洁发电机内部和外部</li>
          <li>检查并紧固所有连接螺栓</li>
          <li>检查绝缘电阻</li>
          <li>检查碳刷和滑环磨损情况（如有）</li>
          <li>检查冷却系统工作状态</li>
        </ul>

        <h3>6.3 大修项目</h3>
        <ul>
          <li>拆卸检查定子和转子</li>
          <li>检查轴承磨损情况，必要时更换</li>
          <li>检查绝缘老化情况</li>
          <li>清洗冷却系统</li>
          <li>进行各项电气试验</li>
        </ul>

        <!-- 维护流程图占位 -->
        <div class="image-placeholder">
          <p class="placeholder-text">[图：发电机维护流程图]</p>
          <div class="placeholder-box large">
            <span>维护流程示意图</span>
            <p>展示发电机日常维护、定期维护和大修的完整流程</p>
          </div>
        </div>
      </section>

      <!-- 常见故障 -->
      <section class="content-section">
        <h2>7. 常见故障及处理</h2>

        <el-collapse v-model="activeFaults" accordion>
          <el-collapse-item title="发电机过热" name="overheat">
            <div class="fault-content">
              <h4>可能原因：</h4>
              <ul>
                <li>冷却系统故障（风扇不转、风道堵塞）</li>
                <li>过载运行</li>
                <li>轴承损坏导致摩擦增大</li>
                <li>绕组短路</li>
              </ul>

              <h4>处理方法：</h4>
              <ol>
                <li>检查冷却系统，清理风道</li>
                <li>降低负载至额定值以下</li>
                <li>检查并更换损坏的轴承</li>
                <li>检查绕组绝缘，修复或更换绕组</li>
              </ol>

              <!-- 过热故障诊断图占位 -->
              <div class="image-placeholder">
                <p class="placeholder-text">[图：发电机过热故障诊断流程图]</p>
                <div class="placeholder-box">
                  <span>过热故障诊断流程</span>
                </div>
              </div>
            </div>
          </el-collapse-item>

          <el-collapse-item title="振动过大" name="vibration">
            <div class="fault-content">
              <h4>可能原因：</h4>
              <ul>
                <li>转子动平衡失调</li>
                <li>轴承磨损或损坏</li>
                <li>地基松动或安装不当</li>
                <li>联轴器不对中</li>
              </ul>

              <h4>处理方法：</h4>
              <ol>
                <li>重新进行转子动平衡</li>
                <li>更换损坏的轴承</li>
                <li>检查并紧固地脚螺栓</li>
                <li>重新调整联轴器对中</li>
              </ol>
            </div>
          </el-collapse-item>

          <el-collapse-item title="绝缘电阻低" name="insulation">
            <div class="fault-content">
              <h4>可能原因：</h4>
              <ul>
                <li>绕组受潮</li>
                <li>绝缘老化</li>
                <li>碳粉或灰尘积累</li>
                <li>绝缘破损</li>
              </ul>

              <h4>处理方法：</h4>
              <ol>
                <li>进行烘干处理</li>
                <li>更换老化绝缘</li>
                <li>彻底清洁发电机内部</li>
                <li>修复或更换破损绝缘</li>
              </ol>

              <!-- 绝缘测试图占位 -->
              <div class="image-placeholder">
                <p class="placeholder-text">[图：绝缘电阻测试方法示意图]</p>
                <div class="placeholder-box">
                  <span>绝缘测试方法</span>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </section>

      <!-- 相关知识链接 -->
      <section class="content-section">
        <h2>8. 相关知识链接</h2>

        <div class="knowledge-links">
          <el-card v-for="link in relatedLinks" :key="link.title" class="link-card">
            <template #header>
              <div class="card-header">
                <span>{{ link.title }}</span>
              </div>
            </template>
            <div class="card-content">
              <p>{{ link.description }}</p>
              <div class="card-actions">
                <el-button type="primary" link @click="navigateTo(link.path)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Printer, Download, Star } from '@element-plus/icons-vue';

const router = useRouter();
const activeFaults = ref(['overheat']);

// 技术参数数据
const technicalParams = ref([
  {
    parameter: '额定功率',
    value: '500',
    unit: 'kW',
    description: '发电机长期连续运行的最大输出功率'
  },
  {
    parameter: '额定电压',
    value: '400',
    unit: 'V',
    description: '发电机输出端的额定线电压'
  },
  {
    parameter: '额定电流',
    value: '721',
    unit: 'A',
    description: '发电机在额定功率下的输出电流'
  },
  {
    parameter: '额定频率',
    value: '50',
    unit: 'Hz',
    description: '发电机输出的交流电频率'
  },
  {
    parameter: '额定转速',
    value: '1500',
    unit: 'rpm',
    description: '发电机转子的额定旋转速度'
  },
  {
    parameter: '功率因数',
    value: '0.8',
    unit: '',
    description: '额定工况下的功率因数'
  },
  {
    parameter: '绝缘等级',
    value: 'F',
    unit: '',
    description: '绕组绝缘材料的耐热等级'
  },
  {
    parameter: '防护等级',
    value: 'IP23',
    unit: '',
    description: '防止固体异物和液体进入的防护级别'
  }
]);

// 相关知识链接
const relatedLinks = ref([
  {
    title: '励磁系统原理',
    description: '了解发电机励磁系统的工作原理和组成部分',
    path: '/principle/exciter'
  },
  {
    title: '自动电压调节器(AVR)',
    description: '学习AVR如何保持发电机输出电压稳定',
    path: '/principle/avr'
  },
  {
    title: '发电机组操作流程',
    description: '掌握发电机组的正确启动、运行和停机操作',
    path: '/principle/control-panel'
  },
  {
    title: '故障诊断与排除',
    description: '学习发电机常见故障的诊断方法和处理措施',
    path: '/principle/control-panel'
  }
]);

const goBack = () => {
  router.push("/home");
};

const handlePrint = () => {
  window.print();
};

const handleDownload = () => {
  // 实现PDF下载功能
  console.log('下载PDF');
};

const handleFavorite = () => {
  // 实现收藏功能
  console.log('收藏发电机本体原理');
};

const navigateTo = (path) => {
  router.push(path);
};
</script>

<style scoped>
.generator-body-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.markdown-content {
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content-title {
  font-size: 28px;
  color: #303133;
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid #409eff;
}

.content-section {
  margin-bottom: 40px;
}

.content-section h2 {
  font-size: 22px;
  color: #303133;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 4px solid #409eff;
}

.content-section h3 {
  font-size: 18px;
  color: #606266;
  margin: 16px 0 12px 0;
}

.content-section p {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 16px;
}

.content-section ul, .content-section ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.content-section li {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 8px;
}

/* 图片容器样式 */
.image-container {
  margin: 20px 0;
  text-align: center;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  background-color: #f8f9fa;
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.image-caption {
  font-style: italic;
  color: #909399;
  margin-top: 8px;
  text-align: center;
}

/* 图片占位符样式 */
.image-placeholder {
  margin: 20px 0;
  text-align: center;
}

.placeholder-text {
  font-style: italic;
  color: #909399;
  margin-bottom: 10px;
}

.placeholder-box {
  border: 2px dashed #dcdfe6;
  border-radius: 4px;
  padding: 40px 20px;
  background-color: #fafafa;
  color: #909399;
}

.placeholder-box.large {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 故障内容样式 */
.fault-content {
  padding: 10px;
}

.fault-content h4 {
  color: #606266;
  margin: 16px 0 8px 0;
}

.fault-content ul, .fault-content ol {
  margin-left: 20px;
}

/* 知识链接样式 */
.knowledge-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.link-card {
  height: 100%;
  transition: transform 0.3s;
}

.link-card:hover {
  transform: translateY(-5px);
}

.card-header {
  font-weight: bold;
}

.card-content {
  min-height: 120px;
}

.card-actions {
  margin-top: 16px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .generator-body-page {
    padding: 12px;
  }

  .markdown-content {
    padding: 16px;
  }

  .content-title {
    font-size: 24px;
  }

  .content-section h2 {
    font-size: 20px;
  }

  .content-section h3 {
    font-size: 16px;
  }

  .knowledge-links {
    grid-template-columns: 1fr;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
}

/* 打印样式 */
@media print {
  .page-header, .header-actions {
    display: none;
  }

  .generator-body-page {
    padding: 0;
    background-color: #fff;
  }

  .markdown-content {
    padding: 0;
    box-shadow: none;
  }

  .image-placeholder {
    display: none;
  }
}
</style>